<template>
  <div class="comment">
    <div class="commentHead" >
      <span class="commentCount">
        <span>全部评论</span>
        <span>{{ replyVoPage.total}}</span>
      </span>
    </div>
    <div class="msgCan">
      <ul class="container">
        <li class="commentItem" v-for="(item,index) in replyVoPage.list" :key="index">
          <div class="topichead" >
            <div class="user">
              <img :src="item.headImage" alt="userlogo" :title="item.contactName">
              <span class="nickname">{{'小默默' + item.contactName}}</span>
            </div>
            <div class="dropdown">
              <div class="commentTime">
                <span>{{item.lastEditTimeDesc}}</span>
              </div>
              <el-dropdown @command="handleSelect"  trigger="click">
                <span @click.stop=" id = {id: item.id, userId: item.userId}" class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item  command="isCommentDelete">删除</el-dropdown-item>
                  <el-dropdown-item  command="shutUp">禁言用户</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div class="content">
            <p v-if="item.hasRefComment" class="quoteMsg">
              {{item.refCommentOutline}}            
            </p> 
            <p class="personalMsg">
              {{item.content}}
            </p>
          </div>
        </li>
      </ul>
    </div>
    <pc-dialog :width="350" :height="320" :is-show="showDialog" :title='title' @on-close="closeMask">
        <select-mask @on-close="closeMask" :mask="mask" :opraId="id" />
    </pc-dialog>
  </div>
</template>
<script>
  import PcDialog from '../../../../../components/dialog/center.vue';
  import SelectMask from './selectMak.vue';
  export default {
    props: ['replyVoPage'],
    data() {
      return {
        mask: '',
        showDialog: false,
        id: {}
      };
    },
    methods: {
      handleSelect (command) {
        this.mask = command;
        this.showDialog = true;
      },
      closeMask () {
        this.showDialog = false;
      }
    },
    computed: {
      title() {
        let arr = {isCommentDelete: '请选择删除原因', shutUp: '请选择禁言原因'};
        return arr[this.mask];
      }
    },
    components: {
      PcDialog,
      SelectMask
    }
  };
</script>
<style lang="less" rel="stylesheet/less" scoped>
  .topichead{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: center;
  
    .dropdown{
      display: flex;
      .commentTime{
        margin-right: 20px;
        color: #aaa;
      }
      .el-dropdown-link{
        color: #409eff;
      }
    }
    .user{
      padding: 20px 0;
      display: flex;
      align-items: center;
      img{
        width: 36px;
        height: 36px;
        border-radius: 18px;
      }
      .nickname{
        margin-left: 20px;
        font-size: 18px;
        font-weight: 500;
      }
    }
  }
  .comment{
    .commentHead{
      padding: 15px 0;
      border-bottom: 1px solid #eee;
      .commentCount{
        span{
          font-size: 18px;
        }
      }
    }
    .msgCan{
      overflow: hidden;
      height: 450px;
      .container{
        height: 450px;
        overflow-y: auto;
        .commentItem{
          border-bottom: 1px solid #eee;
          .topichead{
            .topichead;
          }
          .content{
            margin: 10xp 0;
            .quoteMsg{
              width: 100%;
              padding: 15px;
              background: #f0f2f5;
              border-radius: 5px;
            }
            .personalMsg{
              padding: 15px 0;
            }
          }
        }
    }
    }

  }
</style>
